<template>
    <div class="report">
        <div class="top">
            <div v-hasOrg>
                <span>已注册小区数</span>
                <div style="font-size:50px;color:red">{{totalObj.orgTotal}}</div>
            </div>
            <div>
                <span>累计报警总数</span>
                <div style="font-size:50px;color:red">{{totalObj.alarmTotal}}</div>
            </div>
            <div>
                <span>设备总数</span>
                <div style="font-size:50px;color:red">{{totalObj.cameraTotal+totalObj.rfidTotal+totalObj.electricTotal}}</div>
            </div>
            <div>
                <span>已注册用户数</span>
                <div style="font-size:50px;color:red">{{totalObj.ownerTotal}}</div>
            </div>
            <div>
                <span>已注册车辆数</span>
                <div style="font-size:50px;color:red">{{totalObj.carTotal}}</div>
            </div>
        </div>
        <div class="chat" >
            <div style="width:48%;border: 1px solid #034c6a;height:calc(100vh - 300px);" v-hasOrg>
                <h5>车辆入网统计</h5>
                <div id="chat1" style="width:100%;height:inherit"></div>
            </div>

            <div style="width:47%;border: 1px solid #034c6a;margin-right:1%;height:calc(100vh - 300px);" v-hasOrg>
                <h5>报警统计</h5>
                <div id="chat2" style="width:100%;height:inherit"></div>
            </div>

            <div style="width:47%;border: 1px solid #034c6a;height:100%" v-show="this.$store.state.data.globalOrg.id!=-1">
                <h5>设备报警分布</h5>
                <div id="chat3" style="width:100%;height:inherit"></div>
            </div>
            <div style="width:47%;border: 1px solid #034c6a;height:100%;position: relative;" v-show="this.$store.state.data.globalOrg.id!=-1">
                <h5>车辆进出统计</h5>
                <div id="chat4" style="width:100%;height:inherit"></div>
                <div style="position: absolute;top: 50%;left: 48%; color: #fff;">暂无数据</div>
            </div>
           
        </div>
        
    </div>
</template>

<script>
import * as echarts from 'echarts'
import * as API from '@/api/business/report'
export default {
    data() {
        return {
            totalObj: {
                orgTotal: 0,
                alarmTotal: 0,
                rfidTotal: 0,
                electricTotal: 0,
                ownerTotal: 0,
                cameraTotal: 0,
                carTotal: 0
            }
        }
    },
    methods: {
        queryTotal() {
            API.getBusinessTotal({
                orgId: this.$store.state.data.globalOrg.id || ''
            }).then(res => {
                if (res.data.code === 0) {
                    this.totalObj = res.data.data
                }
            })
        },
        initChat1() {
            var chartDom = document.getElementById('chat1')
            if(!chartDom){
                return
            }
            var myChart = echarts.init(chartDom)
            var option

            option = {
                darkMode: true,
                tooltip: {
                    trigger: 'item'
                },
                legend: {
                    orient: 'vertical',
                    left: 'right',
                    textStyle:{
                        color:'#fff'
                    }
                },
                series: [
                    {
                        name: '车辆总数',
                        type: 'pie',
                        radius: '50%',
                        data: [],
                        emphasis: {
                            itemStyle: {
                                shadowBlur: 10,
                                shadowOffsetX: 0,
                                shadowColor: 'rgba(0, 0, 0, 0.5)'
                            }
                        }
                    }
                ]
            }

            API.getCarReport().then(res => {
                if (res.data.code === 0) {
                    let data = []
                    let serise = res.data.data.series
                    res.data.data.xAxis.forEach((item,index)=>{
                        data.push({value:serise[index],name:item})
                    })
                    option.series[0].data = data

                    option && myChart.setOption(option)
                }
            })
        },
        initChat2() {
            var chartDom = document.getElementById('chat2')
            if(!chartDom){
                return
            }
            var myChart = echarts.init(chartDom)
            var option

            option = {
                darkMode: true,
                tooltip: {
                    trigger: 'item'
                },
                legend: {
                    orient: 'vertical',
                    left: 'right',
                    textStyle:{
                        color:'#fff'
                    }
                },
                series: [
                    {
                        name: '报警总数',
                        type: 'pie',
                        radius: '50%',
                        data: [],
                        emphasis: {
                            itemStyle: {
                                shadowBlur: 10,
                                shadowOffsetX: 0,
                                shadowColor: 'rgba(0, 0, 0, 0.5)'
                            }
                        }
                    }
                ]
            }

            API.getAlarmReport().then(res => {
                if (res.data.code === 0) {
                    let data = []
                    let serise = res.data.data.series
                    res.data.data.xAxis.forEach((item,index)=>{
                        data.push({value:serise[index],name:item})
                    })
                    option.series[0].data = data

                    option && myChart.setOption(option)
                }
            })
        },
        initChat3() {
            var chartDom = document.getElementById('chat3')
            if(!chartDom){
                return
            }
            var myChart = echarts.init(chartDom)
            var option

            option = {
                darkMode: true,
                tooltip: {
                    trigger: 'item'
                },
                legend: {
                    orient: 'vertical',
                    left: 'right',
                    textStyle:{
                        color:'#fff'
                    }
                },
                series: [
                    {
                        name: '报警设备分布',
                        type: 'pie',
                        radius: '50%',
                        data: [],
                        emphasis: {
                            itemStyle: {
                                shadowBlur: 10,
                                shadowOffsetX: 0,
                                shadowColor: 'rgba(0, 0, 0, 0.5)'
                            }
                        }
                    }
                ]
            }

            API.getAlarmDistribution({orgId: this.$store.state.data.globalOrg.id || ''}).then(res => {
                if (res.data.code === 0) {
                    let data = []
                    let serise = res.data.data.series
                    res.data.data.xAxis.forEach((item,index)=>{
                        data.push({value:serise[index],name:item})
                    })
                    option.series[0].data = data

                    option && myChart.setOption(option)
                }
            })
        }
    },
    beforeDestroy() {
        this.$root.Bus.$off('change-global-orgid')
    },
    mounted() {
        this.$root.Bus.$on('change-global-orgid', this.queryTotal)
        this.queryTotal()
        this.initChat1()
        this.initChat2()
        this.initChat3()
    }
}
</script>


<style scoped lang="scss">
.report {
    background-color: #081832;
    display: flex;
    flex-direction: column;
    .top {
        display: flex;
        justify-content: center;
        height: 130px;
        margin-top: 20px;
        padding-left: 1%;
        padding-right: 1%;
        > div {
            width: 20%;
            height: inherit;
            color: #fff;
            margin-right: 1%;
            border: 1px solid #034c6a;
            text-align: center;
            display: flex;
            flex-direction: column;
            justify-content: center;
            span {
                margin-bottom: 10px;
                font-size: 16px;
            }
        }
        > div:hover {
            background: hsla(0, 0%, 100%, 0.1);
        }
    }
    .chat {
        height: calc(100vh - 280px);
        display: flex;
        justify-content: space-around;
        margin-top: 20px;
        h5 {
            text-align: center;
            color: #fff;
            font-size: 20px;
            margin-top: 10px;
        }
    }
}
</style>